import React, { useRef } from 'react';
import { Form } from '@arco-design/web-react';

import EditableContext from '@/pages/telepathy/educationTelepathy/sendOrRecycle/editableContext';

function EditableRow(props) {
  const { children, record, className, ...rest } = props;

  const refForm = useRef(null);

  const getForm = () => refForm.current;

  return (
    <EditableContext.Provider
      value={{
        getForm,
      }}
    >
      <Form
        style={{ display: 'table-row' }}
        children={children}
        ref={refForm}
        wrapper="tr"
        wrapperProps={rest}
        className={`${className} editable-row`}
      />
    </EditableContext.Provider>
  );
}

export default EditableRow;
